import Vue from "vue";
import VueRouter from "vue-router";
/* 创建几个页面 */

import HomeView from "../views/HomeView.vue";

/* 解决vue-router报NavigationDuplicated: Avoided redundant navigation to current location 的问题
https://blog.csdn.net/luer_LJS/article/details/108362563 */

//push 之前的
/* const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
} */

//VueRouter 名称要一样
//这个是路由版本的问题导致报错 路由跳转重构
const originalPush = VueRouter.prototype.push
const originalReplace = VueRouter.prototype.replace
// push
VueRouter.prototype.push = function push (location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
  //return originalPush.call(this, location)  //不起作用是debug
}
// replace
VueRouter.prototype.replace = function push (location, onResolve, onReject) {
  if (onResolve || onReject) return originalReplace.call(this, location, onResolve, onReject)
  return originalReplace.call(this, location).catch(err => err)
  //return originalReplace.call(this, location)
}

Vue.use(VueRouter);

const routes = [
  /*{
    path: "/home",
    name: "home" /* 存疑：教程是Home 大小写分辨 */
    /*component:
      HomeView /* 这个对应 view里面的文件还是export default里面的内容？ */
      //component: () => import("../views/HomeView.vue"),//这个用处？
  /*},
  /* path: "/"为默认地址 ！！不要设置懒加载*/
  /*{
    path: "/",
    name: "home" /* 存疑：教程是Home 大小写分辨 */
    /*component:
      HomeView /* 这个对应 view里面的文件还是export default里面的内容？ */
      //component: () => import("../views/HomeView.vue"),//这个用处？
  /*},*/
  /* 上面是土方法，下面做地址重定向 重定向在回车输入地址的时候还是有些差别的 */
  {
    path: "/home",
    name: "home" ,/* 存疑：教程是Home 大小写分辨 */
    component:
      HomeView ,/* 这个对应 view里面的文件还是export default里面的内容？ */
      //component: () => import("../views/HomeView.vue"),//这个用处？
  },
  {
    path: "/",
    redirect:"/home"
  },
  /*{
    path: "/about",
    name: "about",/* 教程是About */
  // route level code-splitting
  // this generates a separate chunk (about.[hash].js) for this route
  // which is lazy-loaded when the route is visited.
  /* 这个地方是懒加载 */
  /*component: () =>
      import(/* webpackChunkName: "about" （注释）*/ /*"../views/AboutView.vue"),/* 这里的about是大写的 */
  /*},*/
  /* 作为首页的不要设置懒加载 其他的页面可以设置懒加载 */
  /* 这里一共有四个，上面有一个，下面的Tabbar= */
  {
    path: "/list",/* 跳转路径*/
    name: "List",
    component: () => import("../views/list.vue"),
  },
  {
    path: "/cart",
    name: "Cart",
    component: () => import("../views/Cart.vue"),
  },
  {
    path: "/my",
    name: "My",
    component: () => import("../views/My.vue") ,
  },
  {
    path: "/search",
    name: "Search",
    children:[
      {
        /* 这里给一个默认路径 */
        /* 解释 匹配到进入/search则默认进入到../views/search/Search-index.vue*/
        path:"/",
        name:"index",
        component: () => import("../views/search/Search-index.vue") ,
      },
      {
        path:"list",
        name:"list",
        component: () => import("../views/search/Search-list.vue") ,
      }], 
    component: () => import("../views/Search.vue") ,
  },
  {
    path: "/detail",
    name: "Detail",
    meta: {
      keepAlive: true //需要被缓存
  },
    component: () => import("../views/Detail.vue") ,
  },
  {
    path: "/login",
    name: "Login",
    component: () => import("../views/login/Login.vue") ,
  },
  {
    path: "/userLogin",
    name: "UserLogin",
    component: () => import("../views/login/UserLogin.vue") ,
  },
  {
    //path为什么小写？URI中统一使用小写字母. 根据RFC3986定义，URI是对大小写敏感的，所以为了避免歧义，我们尽量用小写字符。
    path: "/register",
    name: "Register",
    component: () => import("../views/login/Register.vue") ,
  },

//找回密码
  {
    path: "/recovery",
    name: "Recovery",
  	children:[
  		{
        //进入的是index  path
  			path: "/",
  			name: "index",
  			component: () =>
  			  import("../views/recovery/RecoveryIndex.vue"),
  		},
  		{
  			path: "btn",
  			name: "btn",
  			component: () =>
  			  import("../views/recovery/RecoveryBtn.vue"),
  		}
  	],
    //这个不懂
    component: () =>
      import("../views/Search.vue"),
  },

  //修改地址页面
  {
    path: "/path",
    name: "Path",
    //这个不懂
    children:[
  		{
        //进入的是index  path
  			path: "/",
  			name: "Pathindex",
  			component: () =>
  			  import("../views/path/Path-Index.vue"),
  		},
      {
        path: "path-list",
        name: "path-list",
        component: () =>
          import("../views/path/Path-List.vue"),
      },
  	],
    component: () =>
      import("../views/Path.vue"),
  },
  //
  {
    path: "/order",/* 跳转路径*/
    name: "Order",
    meta: {
      keepAlive: true //需要被缓存
  },
    component: () => import("../views/Order.vue"),
  },
  {
    path: "/payment", //跳转支付了//支付成功页面
    name: "Payment",
    component: () =>
      import("../views/Payment.vue"),
  },
];



//这个不懂
const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});


//导航守卫要写在const router = new VueRouter 的下面！！！写到上面还没有router
//导航守卫 
//beforeEach  to 进到哪？  from 从哪来？ next 下一步 由next决定下一步
//箭头函数少了箭头就少了灵魂了 hhh
router.beforeEach((to,from,next)=>{
   //下面的就是限制   通过to.name判断  按name去走  验证数组 
  let nextRoute = ['Payment','Cart','Path','Order','pathIndex','path-list']; //不是这些名字都不能进去
  //是否是登录中
  let userInfo = JSON.parse( localStorage.getItem('teaUserInfo')  );//查看token
  
  //当前进入的页面，是不是需要验证哪些页  to的name 
  //to.name通过console.log(to,from,next)查看 
  //查看下标  indexOf最小是Payment 下标 0
  if(  nextRoute.indexOf( to.name ) >= 0  ){
      if( !userInfo ){
          router.push('/login');
      }
  }
  //正常的话就next
  next();
})

export default router;
